import React from 'react';
import { Row, Col } from 'antd';
import ReactEcharts from '@/components/Echarts';
import colors from '@/theme';

const PeopleYear = ({ data }) => {
    const getOption = () => ({
        tooltip: {
            trigger: 'item'
        },
        legend: {
            type: 'scroll',
            x: 'center',
            data: data.map(item => item.name)
        },
        xAxis: {
            type: 'category',
            data: data.map(item => item.name),
            show: false
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            // minInterval: 1,
            axisLabel: {
                color: 'rgba(0,0,0,0.45)'
            },
            axisLine: {
                show: false,
                lineStyle: {
                    type: 'dashed'
                }
            },
            axisTick: {
                show: false
            }
        },
        series: {
            barWidth: '60%',
            data: data.map((item, index) => ({
                name: item.name,
                value: item.value,
                itemStyle: {
                    color: colors[index]
                }
            })),
            type: 'bar',
            label: {
                normal: {
                    show: false,
                    position: 'top',
                    formatter: '{c}',
                    fontSize: 12
                }
            }
        }
    });
    const getLegend = () => ({
        legend: {
            type: 'scroll',
            data: data.map(item => item.name)
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '0%',
                tooltip: {
                    show: false
                },
                center: ['50%', '60%'],
                data,
                label: {
                    normal: {
                        show: false
                    }
                },
                animation: false
            }
        ]
    });
    return (
        <React.Fragment>
            <Row>
                <Col span={24}>
                    <ReactEcharts
                        style={{
                            height: 30
                        }}
                        option={getLegend()}
                    />
                </Col>
                <Col span={24}>
                    <ReactEcharts option={getOption()} />
                </Col>
            </Row>
        </React.Fragment>
    );
};

export default PeopleYear;
